<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{message}}
<!--  名字之间加一个空格-->
<!--  -->
  <h2>{{firstName}} {{lastName}}</h2>
  <h2>{{firstName+' '+lastName}}</h2>

<!--  通过方法 实现-->
  <h2>{{getFullName()}}</h2>

<!--  计算属性 实现-->
  <h2>{{fullName}}</h2>

</div>
  <script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el:'#app',
    data:{
      message:"message",
      firstName: 'xiao',
      lastName:'liang',

    },
    //计算属性
    computed:{
      fullName:function (){
        return this.firstName+' '+this.lastName
      }
    },
    methods:{
    //通过 方法 返回结果
    getFullName:function (){
      return this.firstName+' '+this.lastName
    }

    }

  })
</script>

</body>
</html>